<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :width="1600"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :title="$isEmpty(data) ? '添加进度' : '修改进度'"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
        <a-row :gutter="16" type="flex">
          <a-col :span="8">
            <a-form-item label="本月新开工（套）">
              <a-input-number v-decorator="['TMNewAmount']" placeholder="请输入本月新开工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="本月新开工（㎡）">
              <a-input-number v-decorator="['TMNewArea']" placeholder="请输入本月新开工面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="本月新竣工（套）">
              <a-input-number v-decorator="['TMFulfilAmount']" placeholder="请输入本月新竣工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="本月新竣工（㎡）">
              <a-input-number v-decorator="['TMFulfilArea']" placeholder="请输入本月新竣工面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="累计开工（套）">
              <a-input-number v-decorator="['TotalAmount']" placeholder="请输入累计开工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="累计开工面积（㎡）">
              <a-input-number v-decorator="['TotalArea']" placeholder="请输入累计开工面积"></a-input-number>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="基础施工（套）">
              <a-input-number v-decorator="['BasalAmount']" placeholder="请输入基础施工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="基础施工面积（㎡）">
              <a-input-number v-decorator="['BasalArea']" placeholder="请输入基础施工面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="主体施工（套）">
              <a-input-number v-decorator="['MainAmount']" placeholder="请输入主体施工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="主体施工面积（㎡）">
              <a-input-number v-decorator="['MainArea']" placeholder="请输入主体施工面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="基本建成（套）">
              <a-input-number v-decorator="['BasalFulfilAmount']" placeholder="请输入基本建成"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="基本建成面积（㎡）">
              <a-input-number v-decorator="['BasalFulfilArea']" placeholder="请输入基本建成面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="竣工（套）">
              <a-input-number v-decorator="['FulfilAmount']" placeholder="请输入竣工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="竣工面积（㎡）">
              <a-input-number v-decorator="['FulfilArea']" placeholder="请输入竣工面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="未开工（套）">
              <a-input-number v-decorator="['UNStartAmount']" placeholder="请输入未开工数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="未开工（㎡）">
              <a-input-number v-decorator="['UNStartArea']" placeholder="请输入未开工面积"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="本月完成投资（万元）">
              <a-input-number v-decorator="['TMFund']" placeholder="请输入本月完成投资金额"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="累计完成投资（万元）">
              <a-input-number v-decorator="['TotalFund']" placeholder="请输入累计完成投资金额"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item label="描述" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-textarea
                placeholder="描述"
                v-decorator="['Descr']"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="填报日期">
              <a-date-picker v-decorator="['CreateDate']" placeholder="请选择填报日期" valueFormat="YYYY-MM-DD">
              </a-date-picker>
            </a-form-item>
          </a-col>
        </a-row>
        <file-list
          v-if="visible"
          ref="fileList"
          category="SCTP"
          tableNames="ebll_No001HousProject_Progress"
          :fileList="detailData.SCWJJH"
          :option="{
            typeRequired: false,
          }"
        ></file-list>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { yearPicker, fileList } from '@/components'
import { getProjectScheduleDetail, postProjectSchedule } from '@/api/followUpManagement'
import pick from 'lodash.pick'
export default {
  components: {
    yearPicker,
    fileList
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'plan' }),
      isSubmiting: false,
      spinning: false,
      detailData: {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  methods: {
    fetchData () {
      if (!this.$isEmpty(this.data)) {
        this.spinning = true
        getProjectScheduleDetail({
          ID: this.data.ID
        })
          .then((res) => {
            this.detailData = res.data[0]
            this.$nextTick(() => {
              this.form.setFieldsValue(
                pick(res.data[0], [
                  'TMNewAmount',
                  'TMNewArea',
                  'TMFulfilAmount',
                  'TMFulfilArea',
                  'TotalAmount',
                  'TotalArea',
                  'BasalAmount',
                  'BasalArea',
                  'MainAmount',
                  'MainArea',
                  'BasalFulfilAmount',
                  'BasalFulfilArea',
                  'FulfilAmount',
                  'FulfilArea',
                  'UNStartAmount',
                  'UNStartArea',
                  'TMFund',
                  'TotalFund',
                  'Descr',
                  'CreateDate'
                ])
              )
            })
          })
          .finally(() => {
            this.spinning = false
          })
      }
    },
    close () {
      this.form.resetFields()
      this.$emit('update:visible', false)
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const isAdd = this.$isEmpty(this.data)
          this.$refs.fileList.validateFields((fileErr, fileData) => {
            Object.assign(values, {
              ID: this.detailData.ID || 0,
              LID: this.$route.params.id,
              Incident: this.detailData.Incident || '',
              Mode: this.detailData.Mode || 0,
              Creater: this.detailData.Creater || this.$store.getters.nickname,
              SCWJJH: fileData
            })
            this.isSubmiting = true
            postProjectSchedule({
              State: isAdd ? 'add' : 'update',
              progress: values
            })
              .then((res) => {
                this.$message.success(isAdd ? '添加成功！' : '修改成功！')
                this.$emit('success', isAdd)
                this.close()
              })
              .finally(() => {
                this.isSubmiting = false
              })
          })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  white-space: normal;
  padding-right: 12px;
}
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
